<template>
	<div class="box">
		<div class="logo"> <img src="../../static/未标题-1.png" alt="">
		  <h2 style="margin: 0 auto;">W E L L C A M E</h2>
		</div>
      
		<div class="usercontent">
			<input type="text" :value="value" @input="getuser" placeholder="请输入用户名或者手机号" />
			<input type="password" :value="password" @input="getuser2" placeholder="请输入密码" />
			<u-button type="primary" @click="login">确认登录</u-button>
		</div>
	</div>
</template>


<script>
	import {
		loginlist,loginlist2
	} from "../../api/index.js";
	export default {
		data() {
			return {
				list:[],
				value: '',
				password: '',
			}
		},
		onShow(){
			this.getlogin()
		},
		onLoad() {
			this.getlogin()
		},
		methods:{
			getlogin(){
				loginlist2().then(res => {
				this.list = res.data
				console.log(this.list);
			})
			},
			getuser(e) {
				console.log(e.detail.value);
				this.value = e.detail.value
			},
			getuser2(e) {
				console.log(e.detail.value);
				this.password = e.detail.value
			},
			login(){
				let flag=this.list.find(v=>v.username==this.value)
				if(flag){
					uni.showToast({
					 title: '用户名不存在',
					 duration: 2000,
					 icon:'error'
					});
				}else{
					uni.switchTab({
						url:'/pages/Home/Home'
					})
				}

			}

		}
	}
</script>

<style scoped>
	.box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: column;
	}

	.logo {
		width: 100%;
		height: 50vh;
		position: relative;
		/* background-color: red; */
	}

	.logo img {
		width: 100%;
		height: 100%;
	}
	.logo h2{
		position: absolute;
		bottom:20%;
		left:30%;
	}

	.usercontent {
		width: 100%;
		height: 30vh;
		/* background-color: red; */
		display: flex;
		flex-flow: column;
		justify-content: space-between;
	}
</style>